import React, {PureComponent} from "react";
import {connect} from "react-redux";
import {Button, Divider, Icon, notification, Popconfirm, Table} from "antd";
import {tableProps} from "../../lib/ui";
import CreateRateModal from "./CreateRateModal";
import {getCommonRate, showCreateRate, showUpdateRate, updateCarrierModel} from "./actions";
import UpdateRateModal from "./UpdateRateModal";
import {getPrincipal} from "../../lib/identity";

class RateModal extends PureComponent {

    handleRateCommon = () => {
        const {dispatch} = this.props;
        dispatch(getCommonRate());
    };
    handleShowCreate = () => {
        const {dispatch} = this.props;
        dispatch(showCreateRate());
    };
    handleUpdateRate = record => {
        const {dispatch} = this.props;
        dispatch(showUpdateRate(record));
    };
    handleDeleteRate = id => {
        const {dispatch, model} = this.props;
        let deleteIndex = model.rates.findIndex(item => item.id === id);
        model.rates.splice(deleteIndex, 1);
        dispatch(updateCarrierModel(model));
        notification.success({
            message: '移除成功'
        });
    };

    render() {
        const {rates = [], loading} = this.props;
        const columns = [
            {
                title: "转换前币种",
                dataIndex: "fromRate",
                width: "150px",
            }, {
                title: "转换后币种",
                dataIndex: "toRate",
                width: "150px",
            }, {
                title: "汇率",
                dataIndex: "rate",
                width: "200px",
            }
        ];
        if (getPrincipal().admin) {
            columns.push(
                {
                    title: '功能',
                    dataIndex: '',
                    key: 'x',
                    render: (text, record) => <span>
                    <a onClick={() => this.handleUpdateRate(record)}><Icon type="edit"/></a>
                    <Divider type="vertical"/>
                    <Popconfirm title="确定移除此汇率?" okText="是" cancelText="否"
                                onConfirm={() => this.handleDeleteRate(record.id)}>
                        <Icon type="delete"/>
                    </Popconfirm>
                </span>,
                }
            );
        }
        return (

            <div>
                <div className="actions">
                    <Button onClick={() => this.handleShowCreate()}>新增一行汇率</Button>
                    <Button onClick={() => this.handleRateCommon()}>提取公共汇率</Button>
                </div>
                <Table
                    {...tableProps}
                    columns={columns}
                    dataSource={rates}
                    loading={loading}
                />
                <CreateRateModal/>
                <UpdateRateModal/>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        ...state.carrier.create,
        rates: state.carrier.create.model.rates
    };
};

export default connect(mapStateToProps)(RateModal);
